<template>
    <div class="warp v-ranklist">
        <van-nav-bar title="排行榜" :fixed="true" class="v-sticky-bar">
            <i class="iconfont ireturn" slot="left" @click="back"></i>
        </van-nav-bar>
        <div class="v-sticky-img">
          <img src="../assets/img/s_1.jpg" width="100%"/>
        </div>
        <div class="v-body v-bar-body">
          <van-sticky :offset-top="46">
            <van-tabs v-model="tabActive" >
                <van-tab :title="'电影'">
                </van-tab>
                <van-tab :title="'电视剧'">
                </van-tab>
                <van-tab :title="'综艺'">
                </van-tab>
                <van-tab :title="'动漫'">
                </van-tab>
            </van-tabs>
          </van-sticky>
            <div class="v-ranklist">
                <RankListItem :data="testData"/>
            </div>
        </div>
        <BackTop />
    </div>
</template>
<script>
import RankListItem from '../components/RankListItem';
export default {
  name: "ranklist",
  components: {
    RankListItem,
  },
  data() {
    return {
      tabActive: 0,
      testData: [],
      tdata: {
        pic: "../assets/img/350.jpg",
        name: "陈情令",
        status: "更新至50-已完结"
      }
    };
  },
  methods: {
    back() {
      this.$back();
    }
  },
  mounted() {
    for (var i = 0; i < 10; i++) {
      this.testData.push(this.tdata);
    }
  }
};
</script>
<style lang="less" >
.v-ranklist{
    .van-tabs--line .van-tabs__wrap{
        position: relative;
    }
}
</style>
